<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-11 20:23:45
 * @LastEditTime: 2019-10-11 20:32:32
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-row class="el-spa">
    <el-container>
      <el-container>
        <el-aside width="230px">
          <el-row style="width:230px">
            <el-col>
              <div class="sp-logo">Boot Plus Element Admin</div>
            </el-col>
            <el-col>
              <div class="vertical">
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo sp-v-menu"
                  mode="vertical"
                  @open="handleOpen"
                  @close="handleClose"
                >
                  <el-submenu index="1">
                    <template v-slot:title>
                      <i class="el-icon-location"></i>
                      <span>导航一</span>
                    </template>
                    <el-menu-item-group>
                      <!-- 这种不是vue单文件组件的顶级template 标签是作为插槽-->
                      <template v-slot:title>
                        分组一
                      </template>
                      <el-menu-item index="1-1">选项1</el-menu-item>
                      <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                      <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                      <template v-slot:title>
                        选项4
                      </template>
                      <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                  </el-submenu>
                  <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                  </el-menu-item>
                  <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                  </el-menu-item>
                  <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航四</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-col>
          </el-row>
        </el-aside>
      </el-container>
      <el-container direction="vertical">
        <el-header>
          <div class="horizontal-menu-bar">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template v-slot:title>
                  我的工作台
                </template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                  <template v-slot:title>
                    选项4
                  </template>
                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4">
                <a href="https://www.ele.me" target="_blank">订单管理 </a>
              </el-menu-item>
            </el-menu>
          </div>
          <div class="sp-breadcrumb-space">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>活动管理</el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </el-header>
        <el-main>
          <div class="sp-tabs">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              editable
              @edit="handleTabsEdit"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
              >
                <div class="search-pan">
                  <el-collapse accordion>
                    <el-collapse-item title="查询条件">
                      <el-form
                        :inline="true"
                        :model="formInline"
                        class="demo-form-inline"
                      >
                        <el-form-item label="审批人">
                          <el-input
                            v-model="formInline.user"
                            placeholder="审批人"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item label="活动区域">
                          <el-select
                            v-model="formInline.region"
                            placeholder="活动区域"
                          >
                            <el-option
                              label="区域一"
                              value="shanghai"
                            ></el-option>
                            <el-option
                              label="区域二"
                              value="beijing"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            @click="onSubmit"
                          >查询</el-button
                          >
                        </el-form-item>
                      </el-form>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <el-table
                  :data="
                    tableData.filter(
                      data =>
                        !search ||
                        data.name.toLowerCase().includes(search.toLowerCase())
                    )
                  "
                  style="width: 100%"
                >
                  <el-table-column label="Date" prop="date"> </el-table-column>
                  <el-table-column label="Name" prop="name"> </el-table-column>
                  <el-table-column align="right">
                    <template v-slot:header>
                      <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                    </template>
                    <template>
                      <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                      >
                        Edit
                      </el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                      >
                        Delete
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
  </el-row>
</template>

<script>
export default {
  name: 'ElementDemo',
  props: {},
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      search: '',
      editableTabsValue: '1',
      editableTabs: [
        {
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }
      ],
      tabIndex: 1
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.sp-logo {
  height: 4rem;
  text-align: center;
  vertical-align: middle;
  line-height: 4rem;
  background: whitesmoke;
  font-weight: bolder;
  font-size: 1.1rem;
}
.sp-breadcrumb-space {
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: white;
}
.sp-tabs {
  margin-top: 2rem;
}
</style>
